<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>高德地图 - 点击获取坐标</title>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script src="qrc:///qtwebchannel/qwebchannel.js"></script>
</head>
<body>
    <div id="mapContainer" style="width: 100%; height: 100vh;"></div>
    <div id="coordinates" style="padding: 10px; font-family: Arial;">点击地图获取坐标：未记录</div>
<script>
        // 初始化 WebChannel
        document.addEventListener("DOMContentLoaded", function() {
            new QWebChannel(qt.webChannelTransport, function(channel) {
                window.pyObject = channel.objects.pyObject;
                console.log("WebChannel 已初始化，pyObject:", window.pyObject);
            });
        });
        // 获取当前页面的URL
        var currentURL = window.location.href;

        // 提取目录路径
        var directoryPath = currentURL.substring(0, currentURL.lastIndexOf('/') + 1);

        // 将目录路径显示在页面上
        document.getElementById('coordinates').textContent = "当前目录: " + directoryPath;

        let map;
        let markers = [];

        window.onload = function() {
            AMapLoader.load({
                key: "your_apikey", // 替换为真实 Key
                version: "2.0",
                plugins: ['AMap.Scale', 'AMap.ToolBar']
            }).then((AMap) => {
                map = new AMap.Map('mapContainer', {
                    layers: [new AMap.TileLayer.Satellite()],
                    zoom: 13,
                    center: [108.378925, 22.842527]
                });
                map.addControl(new AMap.Scale());
                map.addControl(new AMap.ToolBar());

                // 监听点击事件
                map.on('click', function(e) {
                    const lng = e.lnglat.getLng();
                    const lat = e.lnglat.getLat();
                    document.getElementById('coordinates').innerHTML = 
                        `点击坐标：经度 ${lng.toFixed(6)}, 纬度 ${lat.toFixed(6)}`;
                    if (window.pyObject) {
                        window.pyObject.onMapClicked(lng, lat);
                    } else {
                        console.error("[JS] pyObject 未定义！");
                    }
                });
            });
            // 示例：添加初始标记
            addMarker(116.397428, 39.90923, "北京");
            addMarker(121.473701, 31.230416, "上海");
        };

        function addMarker(lng, lat, title) {
            if (!map) return;
            const marker = new AMap.Marker({
                position: [lng, lat],
                map: map,
                icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png" //icon: directoryPath + "towerdot.png"  
            }); 
            marker.setExtData({ title: title || "未命名标记" });
            marker.on('click', () => {
                    new AMap.InfoWindow({
                        content: `<strong>${title}</strong><br>经纬度:${lng},${lat}`
                    }).open(map, marker.getPosition());
                });
            markers.push(marker);           
        }

        function clearMarkers() {
            map.clearMap();
        }

        function searchMarkers(keyword) {
            if (!map) return;
            let found = false;
            markers.forEach(marker => {
                const title = marker.getExtData()?.title || '';
                if (title.includes(keyword)) {
                    map.setCenter(marker.getPosition());
                    map.setZoom(16);
                    const infoWindow = new AMap.InfoWindow({
                        //content: `<strong>${title}</strong>`
                        content: `<strong>${title}</strong><br>经纬度:${marker.getPosition().lng},${marker.getPosition().lat}`
                    });
                    infoWindow.open(map, marker.getPosition());
                    found = true;
                    return;
                }
            });
            if (!found) {
                alert("未找到匹配的标记！");
            }
        }

        function exportMarkersToJSON() {
            return JSON.stringify(
                markers.map(marker => ({
                    lng: marker.getPosition().lng,
                    lat: marker.getPosition().lat,
                    title: marker.getExtData()?.title || ""
                }))
            );
        }
    </script>
</body>
</html>